<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>TQL（Taobao Query Language)测试</title>
<script type="text/javascript" language=javascript src="jquery-1.6rc1.js"></script>
		<link type="text/css" href="css/ui-lightness/jquery-ui-1.8.14.custom.css" rel="stylesheet" />	
		<script type="text/javascript" src="js/jquery-1.5.1.min.js"></script>
		<script type="text/javascript" src="js/jquery-ui-1.8.14.custom.min.js"></script>
		<!--  
		<link rel="stylesheet" href="jquery.ui/themes/base/jquery.ui.all.css">-->
		<script src="jquery.ui/ui/jquery.ui.core.js"></script>
		<script src="jquery.ui/ui/jquery.ui.widget.js"></script>
		<script src="jquery.ui/ui/jquery.ui.accordion.js"></script>

	<script>
	$(function() {
		$( "#accordion" ).accordion();
	});
	</script>
		
<script type="text/javascript">
			$(function(){

				// Accordion
				//$("#accordion").accordion({ header: "h3" });
	
				// Tabs
				$('#tabs').tabs();
	

				
				
			});
		</script>
		<style type="text/css">
			/*demo page css*/
			body{ font: 62.5% "Trebuchet MS", sans-serif; margin: 50px;}
			.demoHeaders { margin-top: 2em; }
			#dialog_link {padding: .4em 1em .4em 20px;text-decoration: none;position: relative;}
			#dialog_link span.ui-icon {margin: 0 5px 0 0;position: absolute;left: .2em;top: 50%;margin-top: -8px;}
			
			ul#icons {margin: 0; padding: 0;}
			ul#icons li {margin: 2px; position: relative; padding: 4px 0; cursor: pointer; float: left;  list-style: none;}
			ul#icons span.ui-icon {float: left; margin: 0 4px;}
		</style>	
		

</head>
<script type="text/javascript">


var req;
function getResult(){
	var sql = document.getElementById("sql").value;
	var url = "tqlsend.do?sql=" + sql;
	if(window.XMLHttpRequest){
	  	req=new XMLHttpRequest();
	 }else if(window.ActiveXObject){
	  	req= new ActiveXObject("Microsoft.XMLHTTP");
	 }

	 req.open("GET",url,true);

	 req.onreadystatechange=onback;
	 req.send(null);
}

function onback() {
	 if(req.readyState==4){
		
		 document.getElementById("resultShow").innerHTML = "数据正在加载...";
	 	if(req.status == 200){
		 	//var varRtn = req.responseText;
		 	var response = req.responseText;
			response = response.split('^|^');
			//var response1 = response[0].replace(/(<br>)/g, '\r\n');
			var response1 = response[0];
			var response2 = response1;
			
			if ('-1' != response2.indexOf('<code>26</code>') || '-1' != response2.indexOf('"code":26') || '-1' != response2.indexOf('<code>27</code>') || '-1' != response2.indexOf('"code":27')) {
				if (document.getElementById("api_soure").value == 0) {
					alert('调用此api需要绑定用户，请用户登录后再操作！');
					//bindUser();
				} else {
					if ('' == document.getElementById('session').value) {
						alert('请输入session key！');
					} else {
						alert('无效session key,请重新输入session key！');
					}
					document.getElementById('session').focus();
				}
			} else {
				response1 = response1.replace(new RegExp("&quot;","gm"),'"').replace(new RegExp("%2C","gm"),',').replace(new RegExp("&amp;","gm"),"&");
				//document.getElementById('param').value = response1;
				response2 = response2.replace(new RegExp("&quot;","gm"),'"');
				response2 = response2.replace(new RegExp("&lt;","gm"),'<').replace(new RegExp("&gt;","gm"),'>');
				response2 = response2.replace(new RegExp("&amp;amp;","gm"),'&').replace(new RegExp("&amp;","gm"),'&');
				//如果格式为xml，IE下缩进xml
				if (window.ActiveXObject) {
					var rdr = new ActiveXObject("MSXML2.SAXXMLReader");
					var wrt = new ActiveXObject("MSXML2.MXXMLWriter");
					wrt.indent = true;
					rdr.contentHandler = wrt;
					try {
						rdr.parse(response2);
						document.getElementById('resultShow').value = wrt.output;
					}catch(err) {
						document.getElementById('resultShow').value = response2;
					}
				} else {
					document.getElementById('resultShow').value = response2;
				}

				
			}
			
       }
		
	 }
}


function getTqlResult() {
	var sql = $("#sql").val();//取得sql
	$.ajax({ //一个Ajax过程  
		  type: "get",  //以post方式与后台沟通
		  url : "tqlsend.do", //与此php页面沟通
		  dataType:'xml',//从servlet返回的值以 XML方式 解释
		  data:  'sql=' + sql, 
		  success: function(xml){//如果调用servlet成功
		   $('#resultShow').html("<font color=red><xmp>" + xml.xml  + "</xmp></font>"); //把servlet中的返回值显示在预定义的result定位符位置 
		}   
	});
}



</script>

<script type="text/javascript">
var nowid;
var totalid;
var can1press = false;
$(document).ready(function(){
    $("#sql1").focus(function(){//文本框获得焦点，插入Email提示层
        $(this).after("<div id='myemail' style='width:auto; height:auto; background:#FFF; color:#000; position:absolute; left:"+$(this).get(0).offsetLeft+"px; top:"+($(this).get(0).offsetTop+$(this).height()+2)+"px; border:1px solid #999;'></div>");
        if($("#myemail").html()){
             $("#myemail").css("display","block");
			 $(".newemail").css("width",$("#myemail").width());
			 can1press = true;
        } else {
             $("#myemail").css("display","none");
			 can1press = false;
        }		
    }).keyup(function(){//文本框输入文字时，显示Email提示层和常用Email
		var press = $(this).val();
    	//alert(press);
		if (press){			
			var emailtxt = "";
			var emailvar = new Array("user","users","product","products","items");
			totalid = emailvar.length - 1;
			for(var i=0; i<emailvar.length; i++) {
				emailtxt = emailtxt + "<div class='newemail' style='width:100%;'><font color='red'>" + press + "</font>" + emailvar[i] + "</div>"
			}
			$("#myemail").html(emailtxt);
			if($("#myemail").html()){
				 $("#myemail").css("display","block");
				 $(".newemail").css("width",$("#myemail").width());
				 can1press = true;
			} else {
				 $("#myemail").css("display","none");
				 can1press = false;
			}
		}
    })
	$(document).click(function(){//文本框失去焦点时，删除提示层
        if(can1press){
			$("#myemail").remove();
			can1press = false;
		}
    })
    $(".newemail").live("mouseover",function(){//鼠标经过提示Email时，高亮该条Email
        $(".newemail").css("background","#FFF");
        $(this).css("background","#99CCFF");
		$(this).focus();
		nowid = $(this).index();
    }).live("click",function(){//鼠标点击Email时，文本框内容替换成该条Email，并删除提示层
        var newhtml = $(this).html();
        newhtml = newhtml.replace(/<.*?>/g,"");
        $("#sql").val(newhtml); 
        $("#myemail").remove();
    })
	$(document).bind("keydown",function(e)  
	{     
		if(can1press){
			switch(e.which)
			{
				case 38:
				if (nowid > 0){
					$(".newemail").css("background","#FFF");
					$(".newemail").eq(nowid).prev().css("background","#99CCFF").focus();
					nowid = nowid-1;
				}
				if(!nowid){
					nowid = 0;
					$(".newemail").css("background","#FFF");
					$(".newemail").eq(nowid).css("background","#99CCFF");
					$(".newemail").eq(nowid).focus();
				}
				break;
				case 40:
				if (nowid < totalid){
					$(".newemail").css("background","#FFF");
					$(".newemail").eq(nowid).next().css("background","#99CCFF").focus();
					nowid = nowid+1;
				}
				if(!nowid){
					nowid = 0;
					$(".newemail").css("background","#FFF");
					$(".newemail").eq(nowid).css("background","#99CCFF");
					$(".newemail").eq(nowid).focus();
				}
				break;
				case 13:
				var newhtml = $(".newemail").eq(nowid).html();
				newhtml = newhtml.replace(/<.*?>/g,"");
				$("#sql").val(newhtml);
				$("#myemail").remove();
			}
		}
	})
})
</script>


<body style="FONT-SIZE: 14px;	COLOR: #003366;	FONT-FAMILY: 微软雅黑;">
<form action="tqlsend.do">
	<table>
<tr> 
        	<td colspan="2"> 
        	<div id="tabs" >
        				<a href="http://www.taobao.com/?noscript=1">
			<img src="http://a.tbcdn.cn/tbsp/img/header/logo.png" width=140 height=35 alt="淘宝网 Taobao.com - 阿里巴巴旗下网站">
			
			</a><h1>TQL(Taobao Query Language)</h1>
			</div>
				<span style="float:right;">
        		<a href="http://open.taobao.com/api_tool/taobaoPubAccount.html" target="_blank" style="text-decoration:underline"> 查看测试环境公用账号</a></span> 
        	</td> 
        </tr>
		<tr>
									<input type="hidden" name="appkey" id="appkey" value="12129701"/>
							<input type="hidden" name="api_soure" id="api_soure" value="0"/>
        	<td valign="top">
        	

<div id="accordion">
	<h3><a href="#">使用说明</a></h3>
	<div>
		<p>
		  在右边输入框输入TQL查询语句:<br>
		  select * from taobao.user.get where nick = alipublic29
		</p>
		<p>
			                                                                            然后点击右边的Search按钮，就可以得到演示的效果。
		</p>
	</div>
	<h3><a href="#">查询TOP平台的数据实体</a></h3>
	<div>
		<p>
		目前支持的数据对象有：<br>
							taobao.user.get<br>
							taobao.products.get<br>
							taobao.itemcats.authorize.get<br>
							taobao.aftersale.get<br>
							taobao.postage.get<br>
							taobao.items.get<br>
							。。。。。。<br>
							
							<br>
							<br>
							使用<font color="red">select * from tables</font>可以查询出所有的TOP支持的接口<br>
							<br>
							<br>
		</p>
	</div>
	<h3><a href="#">查询HSF服务的数据实体</a></h3>
	<div>
		<p>
		<br>
							 <font color="red">目前只有一个案例：select * from seller where id = 126</font>
							  <br>
							   <br>
		</p>
		
	</div>
	<h3><a href="#">外部调用方式</a></h3>
	<div>
		<p>
		sql参数就是上面手工输入的TQL语句
		<br><font color="red">http://10.232.126.36:8080/TQLDemo/tqlsend.do?sql=select * from tables</font><br>
		</p>
	</div>
</div>
        	



<td valign="top">
        		
        	请输入TQL：<br>
        		<textarea name="sql" id="sql" cols="60" rows="4" style="font-size:16pt;line-height:30pt;color:red;font-family:Tahoma,Verdana,Arial; ">select * from taobao.user.get where nick = alipublic29</textarea>
        		<div align="center">
        	<p ><a href="javascript:getResult()" id="dialog_link" class="ui-state-default ui-corner-all"><span class="ui-icon ui-icon-newwin"></span>Search</a></p></div>
        		<br>
        		<textarea name="resultShow" id="resultShow" cols="80" rows="16" class="ui-state-default ui-corner-all" readonly="true"></textarea>

        	</td>
        </tr>
        <tr></tr>
    </table>

	
</body>
</form>
</body>
</html>